
   <link rel="stylesheet" href="<?php echo cssPath ?>formulario.css" type="text/css" media="screen"/>
   <script type="text/javascript" src="<?php echo jsPath ?>jquery.min.js"></script>
   <script type="text/javascript" src="<?php echo jsPath ?>sliding.form.js"></script>


    <h1>Cadastre-se</h1>
    <?php
        if (isset($_GET['mensagem'])) {
                $mensagem = $_GET['mensagem'];

                if ($mensagem == 'nome') {
                        echo '<p class="msnError">Você não digitou seu Nome.</p>';
                } elseif ($mensagem == 'sobrenome') {
                        echo '<p class="msnError">Você não digitou seu Sobrenome.</p>';
                } elseif ($mensagem == 'email') {
                        echo '<p class="msnError">Você não digitou seu E-mail.</p>';
                } elseif ($mensagem == 'senha') {
                        echo '<p class="msnError">Você não digitou sua Senha.</p>';
                } elseif ($mensagem == 'sexo') {
                        echo '<p class="msnError">Você não marcou seu Sexo.</p>';
                } elseif ($mensagem == 'datanasc') {
                        echo '<p class="msnError">Você não digitou sua Data de Nascimento.</p>';
                } elseif($mensagem == 'error'){
                        echo '<p class="msnError">Erro ao inserir usuário, tente novamente!</p>';
                } elseif($mensagem == 'sucesso'){
                        echo '<p class="msnSucesso">Usuário inserido com sucesso!</p>';
                }
        }
    ?>
    <div id="wrapper">
        <div id="steps">
            <form id="formElem" name="formElem" action="/cliente/novo" method="post">
                <fieldset class="step">
                    <legend>Conta</legend>
                    <p>
                        <label for="email">E-mail</label>
                        <input id="email" name="email" placeholder="contato@kapilyar.com" type="email" />
                    </p>
                    <p>
                        <label for="senha">Senha</label>
                        <input id="senha" name="senha" maxlength="8" type="password" AUTOCOMPLETE=OFF />
                        <sub> *Ate 8 caracteres</sub>
                    </p>
                </fieldset>
                <fieldset class="step">
                    <legend>Dados Pessoais</legend>
                    <p>
                        <label for="nome">Nome</label>
                        <input id="nome" name="nome" type="text"/>
                    </p>
                    <p>
                        <label for="sobrenome">Sobrenome</label>
                        <input id="sobrenome" name="sobrenome" type="text" />
                    </p>
                    <p>
                        <label for="datanasc">Data de Nascimento</label>
                        <input id="datanasc" name="datanasc" type="date" maxlength="10" placeholder="xx/xx/xxxx" />
                    </p>
                    <p>
                        <label for="sexo">Sexo</label>
                        <select id="sexo" name="sexo" >
                            <option value="Masculino">Masculino</option>
                            <option value="Feminino">Feminino</option>
                        </select>
                    </p>
                </fieldset>
                <!--<fieldset class="step">
                    <legend>Meu cabelo é?</legend>
                    <p>
                        <label for="tipocabelo">Tipo do Cabelo</label>
                        <select id="tipocabelo" name="tipocabelo">
                            <option checked> </option>
                            <option>Afro</option>
                            <option>Cacheado</option>
                            <option>Crespo</option>
                            <option>Liso</option>
                            <option>Ondulado</option>
                        </select>
                    </p>
                    <p>
                        <label for="tamcabelo">Tamanho do Cabelo</label>
                        <select id="tamcabelo" name="tamcabelo">
                            <option checked> </option>
                            <option>Curto</option>
                            <option>Médio</option>
                            <option>Longo</option>
                        </select>
                    </p>
                    <p>
                        <label for="corcabelo">Cor do Cabelo</label>
                        <select id="corcabelo" name="corcabelo">
                            <option checked> </option>
                            <option>Castanho</option>
                            <option>Loiro</option>
                            <option>Preto</option>
                            <option>Ruivo</option>
                        </select>
                    </p>
                </fieldset>-->
                <fieldset class="step">
                    <legend>Confirmação</legend>
                    <p>
                        Se os dados estiverem corretos aparecerá
                        um marcador verde, se não aparecerá um vermelho.
                        Confira sempre seus dados antes de enviar!
                        Obrigado(a)!
                    </p>
                    <p class="submit">
                        <button id="registerButton" type="submit">Cadastrar</button>
                    </p>
                </fieldset>
            </form>
        </div>
        <div id="navigation" style="display:none;">
            <ul>
                <li class="selected">
                    <a href="#">Conta</a>
                </li>
                <li>
                    <a href="#">Dados Pessoais</a>
                </li>
                <!--<li>
                    <a href="#">Meu cabelo é?</a>
                </li>-->
                <li>
                    <a href="#">Confirmação</a>
                </li>
            </ul>
        </div>
    </div>
